<script setup>
import Editor from "@tinymce/tinymce-vue";
import {ref, watch} from "vue";
import config from "@/utils/config"; // 字数统计插件

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: '请输入内容'
  },
  imgLimit: {
    type: Number,
    default: 10
  }
})
const emit = defineEmits(['update:modelValue'])
// 配置
const init = {
  language: 'zh_CN', //语言类型
  // base_url: '/tinymce', // 资源文件根目录
  placeholder: props.placeholder, //textarea中的提示信息
  min_width: 320,
  min_height: 220,
  height: 500, //注：引入autoresize插件时，此属性失效
  resize: 'both', //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
  branding: false, //tiny技术支持信息是否显示
  // statusbar: false, //最下方的元素路径和字数统计那一栏是否显示
  // elementpath: false, //元素路径是否显示

  font_formats:
      '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;', //字体样式
  plugins:
      'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount textpattern autosave emoticons', //插件配置 axupimgs indent2em
  toolbar: [
    'fullscreen undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | bullist numlist | blockquote subscript superscript removeformat ',
    'styleselect formatselect fontselect fontsizeselect | table imageupload emoticons charmap hr pagebreak insertdatetime  selectall visualblocks searchreplace | code print preview | indent2em lineheight formatpainter'
  ], //工具栏配置，设为false则隐藏
  paste_data_images: true, //图片是否可粘贴
  // 自定义按钮
  setup: (editor) => {
    // 保存编辑器实例
    editorInstance.value = editor;
    // 注册图片上传
    editor.ui.registry.addButton('imageupload', {
      tooltip: '插入图片',
      icon: 'image',
      onAction() {
        if(imagePickerRef.value){
         imagePickerRef.value.handleOpen()
        }
      }
    });
  }
}
const content = ref(props.modelValue)
const editorInstance = ref()
const imagePickerRef = ref()
const handleImgSelect = (files) => {
  if (files && files.length > 0) {
    for (let i = 0; i < files.length; i++) {
      editorInstance.value?.insertContent(`<img src="${config.imgDomain}${files[i].uri}" />`)
    }
  }
}

watch(props, (newVal) => content.value = newVal.modelValue)
watch(content, (newVal) => emit('update:modelValue', newVal))

</script>

<template>
  <editor class="tinymce-editor" v-model="content" tag-name="div" :init="init" :api-key="config.tinymceApiKey"/>
  <file-picker-form :type="1" :file-limit="imgLimit" ref="imagePickerRef" @select="handleImgSelect"/>
</template>

<style lang="scss">
.tox-tinymce-aux {
  z-index: 9999 !important;
}
</style>
